
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>登录</title>
  <link rel="stylesheet" href="css/auth.css">
  <script src="js/jquery-3.1.0.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="js/login.js"></script>
  <script>
    $(function () {
        function isPhoneNumber(tel) {
            var reg =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
            return reg.test(tel);
        }
        function times(){
            var time = 60;
            $("#getCoed").html(time+"秒后重新发送");
            $("#getCoed").attr({"disabled":"disabled"});
            var timer=setInterval(function(){
                // 定时器到底了 兄弟们回家啦
                if(time == 1){
                    clearInterval(timer);
                    $("#getCoed").html("获取语音验证码");
                    $("#getCoed").removeAttr("disabled");
                }else{
                    time--;
                    $("#getCoed").html(time+"秒后重新发送");
                }
            }, 1000);
        }
        $("#getCoed").click(function () {
            var tel = $("#telNumber").val();
            if(isPhoneNumber(tel)){
                times();
                $.post(
                    "sendCode",
                    {tel:$("#telNumber").val()},function (date) {
                        if(date.sendCodeState==1){
                            $("#meg-code").html("语音验证码已经发送，请注意查收。");
                        }else{
                            $("#meg-code").html("没有该手机号码");
                        }
                    },"json"
                );
            }else{
                $("#meg-tel").html("手机号填写错误");
            }
        });
        $("#telNumber").blur(function () {
            if(isPhoneNumber($(this).val())){
                $("#meg-tel").html("填写正确");
                $("#getCoed").removeAttr("disabled");
            }else{
                $("#getCoed").attr({"disabled":"disabled"});
                $("#meg-tel").html("手机号填写有误");
            }
        });
        var a=false,b=false;
        $("#newPwd").blur(function () {
            if($(this).val().length>6){
                $("#meg-pwd").html("密码输入正确");
                a=true;
            }else{
                $("#meg-pwd").html("密码必须大于6位");
                a=false;
            }
        });
        $("#code").blur(function () {
            if($(this).val().length==4){
                $("#meg-code").html(" ");
                b=true;
            }else{
                $("#meg-code").html("验证码为4位");
                b=false;
            }
        });
        $("#retrieve").click(function () {
            if(a&&b){
                $.post(
                    "sendCode",
                    {
                        code:$("#code").val(),
                        pwd:$("#newPwd").val()
                    },function (date) {
                        if(date.setPwd==1){
                            //修改成功
                            $("#myModal").modal('hide');
                            $("#body").html("恭喜您，密码修改完成")
                            $("#tishi").modal('show');
                        }else if(date.setPwd==-1){
                            $("#body").html("服务器出了点小问题，请稍后再试")
                            $("#tishi").modal('show');
                        }else if(date.setPwd==-2){
                            $("#body").html("验证码填写错误")
                            $("#tishi").modal('show');
                        }else{
                            $("#body").html("网络出现问题，请稍后再试")
                            $("#tishi").modal('show');
                        }
                    },"json"
                );
            }else{
                $("#body").html("您填写的内容有误，请填写完整后再试")
                $("#tishi").modal('show');
            }
        });

    });
  </script>
</head>

<body>
<div class="lowin lowin-red">
  <div class="lowin-brand">
    <img src="img/kodinger.jpg" alt="logo">
  </div>
  <div class="lowin-wrapper">
    <div class="lowin-box lowin-login">
      <div class="lowin-box-inner">
        <form>
          <p>会员登录</p>
          <div class="lowin-group">
            <label>账号<a href="#" class="login-back-link">登录</a></label>
            <input id="username" name="username"   class="lowin-input" id="username" />
          </div>
          <div class="lowin-group password-group">
            <label>密码 <a href="#" class="forgot-link"   data-toggle="modal" data-target="#myModal" >忘记密码?</a></label>
            <input id="password" type="password" name="password" autocomplete="current-password" class="lowin-input">
            <b id="message" ></b><br/>
            <div class="checkbox">
              <label>
                <input id="log" name="log" type="checkbox" value="yes" type="checkbox">七天免登陆
              </label>
            </div>
          </div>
          <input onclick="login()" class="lowin-btn login-btn" type="button" value="登录" />
          <div class="text-foot">
            没有帐户? <a href="" class="register-link">注册</a>
          </div>
          </form>
      </div>
    </div>

    <div class="lowin-box lowin-register">
      <div class="lowin-box-inner">
        <form>
          <p>让我们创建您的帐户</p>
          <div class="lowin-group">
            <label>账号</label><p id="error-user"></p>
            <input onblur="existsUserName()" id="user-reg" type="text" name="name" autocomplete="name" class="lowin-input">
          </div>
          <div class="lowin-group">
            <label>密码</label><p id="error-pwd"></p>
            <input onblur="existsPwd()" id="pwd-reg" type="password" name="password" autocomplete="current-password" class="lowin-input">
          </div>
          <input onclick="reg()" class="lowin-btn login-btn" type="button" value="注册" />
          <div class="text-foot">
            已经有账户了? <a href="" class="login-link">登录</a>
          </div>
        </form>
      </div>
    </div>
  </div>
  <footer class="lowin-footer">
      热烈欢迎新用户
  </footer>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">忘记密码</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">

        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">手机号码</span>
          </div>
          <input data-toggle="tooltip" title="" id="telNumber" type="text" class="form-control" placeholder="注册时输入的手机号码">
        </div>
        <p id="meg-tel" style="color: #ff5700" ></p>

        <div style="width: 60%" class="input-group mb-3 input-group-sm">
          <div class="input-group-prepend">
            <span class="input-group-text">验证码</span>
          </div>
          <input id="code" type="text" class="form-control" placeholder="接收的语音验证码">
          <div class="input-group-append">
            <button id="getCoed" class="btn btn-primary" type="button">获取验证码</button>
          </div>
        </div>
        <p id="meg-code" style="color: #ff5700" ></p>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">新密码</span>
          </div>
          <input id="newPwd" type="text" class="form-control" placeholder="您要重置的密码">
        </div>
        <p id="meg-pwd" style="color: #ff5700" ></p>
          <button id="retrieve" class="btn btn-primary">提交</button>

      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
      </div>

    </div>
  </div>
</div>

<div class="modal fade" id="tishi">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 id="title" class="modal-title">温馨提示：</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div id="body" class="modal-body">



      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">确定</button>
      </div>

    </div>
  </div>
</div>
<script src="js/auth.js"></script>
<script>
    Auth.init({
        login_url: 'login',
        forgot_url: ''
    });
</script>
</body>
</html>